<script setup>
import { ref, reactive, onMounted } from "vue";

import dd from "@/assets/images/pc/dd.png";
import ddA from "@/assets/images/pc/ddA.png";

const menuList = reactive({
  tableData: [
    {
      number: 101,
      floor: "6#-6F",
      type: "叠合板",
      typeNumber: "1aDB11",
      componentDrawing: "0张",
      productNumber: "1003JS0247-2022-0005.6#.6F.015",
      materialNumber: "",
      unitVolume: 0.308,
      unitWeight: 0.77,
      projectDemand: 1,
      output: 1,
      castQuantity: 1,
      storageQuantity: 1,
      deliveryVolume: 1,
    },
    {
      number: 102,
      floor: "6#-6F",
      type: "叠合板",
      typeNumber: "1aDB12:F1",
      componentDrawing: "0张",
      productNumber: "1003JS0247-2022-0005.6#.6F.016",
      materialNumber: "",
      unitVolume: 0.484,
      unitWeight: 1.21,
      projectDemand: 1,
      output: 1,
      castQuantity: 1,
      storageQuantity: 1,
      deliveryVolume: 1,
    },
    {
      number: 103,
      floor: "6#-6F",
      type: "叠合板",
      typeNumber: "1aDB13:F1",
      componentDrawing: "0张",
      productNumber: "1003JS0247-2022-0005.6#.6F.017",
      materialNumber: "",
      unitVolume: 0.52,
      unitWeight: 1.3,
      projectDemand: 1,
      output: 1,
      castQuantity: 1,
      storageQuantity: 1,
      deliveryVolume: 1,
    },
    {
      number: 104,
      floor: "6#-6F",
      type: "叠合板",
      typeNumber: "1aDB14:F1",
      componentDrawing: "0张",
      productNumber: "1003JS0247-2022-0005.6#.6F.018",
      materialNumber: "",
      unitVolume: 0.235,
      unitWeight: 0.588,
      projectDemand: 1,
      output: 1,
      castQuantity: 1,
      storageQuantity: 1,
      deliveryVolume: 1,
    },
  ],
  curIndex: -1,
  dialogVisible: false,
});

const projectData = reactive({
  tableList: [
    {
      name: "项目总需",
      materialAmount: "601.685",
      membersAmount: "1759",
    },
    {
      name: "排产总量",
      materialAmount: "582.221",
      membersAmount: "1703",
    },
    {
      name: "浇捣总量",
      materialAmount: "582.221",
      membersAmount: "1703",
    },
    {
      name: "产成品总量",
      materialAmount: "582.221",
      membersAmount: "1703",
    },
    {
      name: "入库总量",
      materialAmount: "582.221",
      membersAmount: "1703",
    },
    {
      name: "出库总量",
      materialAmount: "543.103",
      membersAmount: "1583",
    },
  ],
});
const handleClick = (index) => {
  if (index == menuList.curIndex) {
    menuList.curIndex = -1;
    return;
  }
  menuList.curIndex = index;
};

const onBottomButtonClick = () => {
  menuList.dialogVisible = !menuList.dialogVisible;
};

onMounted(() => { });
</script>

<template>
  <div class="assemblyProduct">
    <div class="menuContainer">
      <div class="detail-container">
        <div class="tempModel">
          <div class="imgContainer">
            <iframe src="https://api.bimface.com/preview/31d04b61" frameborder="no"></iframe>
          </div>
          <div class="rightContainer">
            <div class="projectDetail">
              <div class="title">
                <span>项目信息</span>
              </div>
              <el-table :data="projectData.tableList" style="width: 95%; margin: 0 auto" height="calc(100vh - 730px)">
                <el-table-column prop="name" label="明细名称" align="center"></el-table-column>
                <el-table-column prop="materialAmount" label="材料用量m³" align="center"></el-table-column>
                <el-table-column prop="membersAmount" label="构件数" align="center"></el-table-column>
              </el-table>
            </div>
          </div>

          <!-- <div class="footer" style="width: 100%; height: 100%; display: flex; flex-direction: row">
            <div class="modelDetails">
              <div class="title">
                <span>型号明细</span>
              </div>
              <el-table :data="menuList.tableData" style="width: 95%; margin: 0 auto" height="calc(100vh - 730px)">
                <el-table-column prop="number" label="序号" width="70" align="center"></el-table-column>
                <el-table-column prop="floor" label="楼栋-楼层" align="center"></el-table-column>
                <el-table-column prop="type" label="构件类型" align="center"></el-table-column>
                <el-table-column prop="typeNumber" label="构件型号" align="center"></el-table-column>
                <el-table-column prop="componentDrawing" label="构件图纸" align="center"></el-table-column>
                <el-table-column prop="unitVolume" label="单位体积" align="center"></el-table-column>
                <el-table-column prop="unitWeight" label="单位重量" align="center"></el-table-column>
                <el-table-column prop="projectDemand" label="项目总需" align="center"></el-table-column>
                <el-table-column prop="output" label="排产量" align="center"></el-table-column>
                <el-table-column prop="castQuantity" label="浇捣量" align="center"></el-table-column>
                <el-table-column prop="storageQuantity" label="入库量" align="center"></el-table-column>
                <el-table-column prop="deliveryVolume" label="出库量" align="center"></el-table-column>
              </el-table>
            </div>
          </div> -->
        </div>

      </div>
    </div>
    <el-dialog v-model="menuList.dialogVisible" title="PC构件库" width="32%">
      <img src="@/assets/images/pc/abab.png" style="width: 92%; height: 80%" />
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.title {
  width: 100%;
  height: 20px;
  border-left: 3px #8f93f7 solid;
  font-weight: bold;
  padding-left: 10px;
  margin: 15px;
}

.assemblyProduct {
  display: flex;
  width: 100%;
  height: calc(100vh - 55px);
  overflow-y: auto;
  overflow-x: hidden;
  font-family: SourceHanSansSC;
  color: #656565;

  .menuContainer {
    width: 100%;
    height: calc(100vh - 85px);

    .detail-container {
      height: 100%;
      border-radius: 10px;
      background-color: #ffffff;

      .tempModel {
        width: 100%;
        height: 100%;
        margin-bottom: 10px;
        display: flex;
        flex-direction: row;

        .imgContainer {
          flex:7;
          // width: 100%;
          // height: 100%;
          margin: 0 auto;
          font-size: 20px;
          text-align: center;
          line-height: 580px;

          iframe {
            width: 100%;
            height: 100%;
          }

          img {
            width: 25px;
            padding-right: 15px;
            vertical-align: middle;
          }


        }

        .rightContainer {
          flex: 3;
          // width: 30%;
          // height: 90%;

          // .modelDetails {
          //   position: relative;
          //   width: 65%;
          //   height: calc(100vh - 680px);
          //   min-height: 240px;
          //   border: 1px solid #dce3ef;
          //   box-shadow: 2px 2px 0px 0px rgba(236, 238, 252, 0.32);
          //   border-radius: 6px;
          // }

          .projectDetail {
            // position: relative;
            width: 100%;
            
            margin-left: 1%;
            height: 100%;
            min-height: 240px;
            border: 1px solid #dce3ef;
            box-shadow: 2px 2px 0px 0px rgba(236, 238, 252, 0.32);
            border-radius: 6px;
          }
        }
      }

      .footer {
        :deep .el-table {
          min-height: 190px;

          th.el-table__cell {
            background-color: #ECEDFF;
          }

          .el-table__inner-wrapper {
            min-height: 190px;
          }
        }


      }
    }


  }
}
</style>
